package com.teprinciple.wanandroid.ui.page

import android.widget.Toast
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.AlertDialog
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.teprinciple.wanandroid.ui.theme.blue1


import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import com.google.accompanist.flowlayout.FlowRow
import com.google.accompanist.glide.GlideImage
import com.google.accompanist.pager.*
import com.teprinciple.wanandroid.ui.theme.black1
import com.teprinciple.wanandroid.ui.theme.black2
import com.teprinciple.wanandroid.ui.theme.gray2

@ExperimentalPagerApi
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SystemPage() {

    var index by remember {
        mutableStateOf(0)
    }

    Column {
        //WebPage()

        Row(
            modifier = Modifier.fillMaxWidth().height(40.dp).background(blue1),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center
        ) {
            Text(
                text = "体系",
                fontSize = 16.sp,
                color = Color.White,
                textAlign = TextAlign.Center,
                modifier = Modifier.alpha(if (index == 0) 1f else 0.5f).clickable {
                    index = 0
                }
            )

            Text(
                text = "导航",
                fontSize = 16.sp,
                color = Color.White,
                textAlign = TextAlign.Center,
                modifier = Modifier.padding(start = 20.dp).alpha(if (index == 1) 1f else 0.5f)
                    .clickable {
                        index = 1
                    }
            )
        }

        Box(modifier = Modifier.fillMaxSize()) {
            GlideImage(
                data = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOdKgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619075588&t=94ce025e564fb36ecc4ab75ad5305629",
                contentDescription = null,
                loading = {
                    Text(text = "图片加载中")
                },
                modifier = Modifier.fillMaxSize().alpha(0.3f),
                contentScale = ContentScale.FillBounds
            )

            val pagerState = PagerState(pageCount = 2, currentPage = index)

            HorizontalPager(state = pagerState, modifier = Modifier.fillMaxSize()) { page ->
                when(page){
                    0 -> {
                        TiXiPage()
                    }

                    1 -> {
                        DaoHangPage()
                    }
                }
            }
        }
    }
}

@Composable
fun TiXiPage(){
    LazyColumn(modifier = Modifier.fillMaxSize(),contentPadding = PaddingValues(10.dp), content = {
        item {
            Card(elevation = 0.dp) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.padding(10.dp)
                ) {

                    Text(
                        text = "开发环境",
                        color = blue1,
                        fontSize = 14.sp,
                    )

                    Spacer(modifier = Modifier.height(8.dp))

                    FlowRow(
                        mainAxisSpacing = 15.dp,
                        crossAxisSpacing = 8.dp,
                        modifier = Modifier.fillMaxWidth(),
                    ) {
                        arrayListOf(
                            "AndroidStudio相关",
                            "gradle",
                            "官方发布",
                            "90-120hz"
                        ).forEach {
                            Text(
                                text = it,
                                fontSize = 12.sp,
                                color = black1,
                                modifier =   Modifier
                                    .clip(RoundedCornerShape(5.dp))
                                    .background(gray2)
                                    .padding(
                                        horizontal = 5.dp,
                                        vertical = 2.dp
                                    )
                            )
                        }
                    }
                }
            }
        }
    })
}

@Composable
fun DaoHangPage(){
    Box(modifier = Modifier.fillMaxSize().background(blue1))
}